<template>
    <div>
        <!--注册、登录、退出登录按钮-->
        <el-row>
            <el-button plain @click="registerVisible = true" v-if="!isLogin">注册</el-button>
            <el-button type="primary" plain @click="loginVisible = true" v-if="!isLogin">登录</el-button>
            <el-link @click="handleLoginUserClick(loginUserId)" v-if="isLogin">{{loginUser}}</el-link>
            <el-button type="danger" @click="exit" v-if="isLogin">退出登录</el-button>
        </el-row>
        <hr>

        <!--布局容器-->
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu>
                    <el-menu-item index="1-1">
                        <router-link to="/article">文章</router-link>
                    </el-menu-item>
                    <el-menu-item index="1-2">
                        <router-link to="/boilingPoint">沸点</router-link>
                    </el-menu-item>
                    <el-menu-item index="1-3" v-if="loginUserRole===2">
                        <el-badge :value="isNotReadCount" class="item">
                            <e-link @click="handleNoticeClick(loginUserId)">通知</e-link>
                        </el-badge>
                    </el-menu-item>
                    <el-menu-item index="1-3" v-if="loginUserRole===0||loginUserRole===3">
                        <el-badge :value="isNotAuditedCount" class="item">
                            <e-link @click="handleAdminClick(loginUserId)">管理员界面</e-link>
                        </el-badge>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!--沸点列表-->
            <el-container>
                <el-header>
                        <el-button size="small" @click="addBoilingPointVisible=true" v-if="loginUserRole===2">发布沸点</el-button>
                </el-header>
                <el-main>
                    <div ref="boilingPointTable" class="table-scroll-container" @scroll="handleScroll">
                        <el-table :data="tableData">
                            <el-table-column prop="content" label="内容" >
                            </el-table-column>
                            <el-table-column prop="author" label="作者" width="120">
                                <template slot-scope="scope">
                                    <el-link @click="getInfo(scope.row)">{{scope.row.author}}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="发布时间" width="120">
                            </el-table-column>
                            <el-table-column prop="viewCount" label="浏览量" width="120">
                            </el-table-column>
                            <el-table-column prop="likeCount" label="点赞量" width="120">
                            </el-table-column>
                            <el-table-column prop="commentCount" label="评论数" width="120">
                                <template slot-scope="scope">
                                    <el-link @click="getComments(scope.row)" v-if="scope.row.commentCount>0">{{scope.row.commentCount}}</el-link>
                                    <p v-if="scope.row.commentCount===0">0</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="operate"
                                    label="操作"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-link @click="handleCommentLink(scope.row)">评论</el-link>&emsp;
                                    <el-link @click="likeBoilingPoint(scope.row)" v-if="!scope.row.isLiked" type="primary">点赞</el-link>&emsp;
                                    <el-link @click="cancelLikeBoilingPoint(scope.row)" v-if="scope.row.isLiked" type="danger">取消点赞</el-link>&emsp;
                                    <el-link @click="deleteBoilingPoint(scope.row)" type="danger" v-if="(scope.row.authorId===loginUserId||loginUserRole===0||loginUserRole===3)&&loginUserId!==null">删除</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
            </el-container>
        </el-container>

        <!--登录表单-->
        <el-dialog
                title="登录账号"
                :visible.sync="loginVisible"
                width="30%"
        >
            <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-user">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="user.username" placeholder="请输入您的账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password" autocomplete="off" placeholder="请输入您的密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="resetForm('user')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--注册表单-->
        <el-dialog
                title="注册账号"
                :visible.sync="registerVisible"
                width="30%"
        >
            <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-user">
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model="user.username" placeholder="请输入5-15位账号" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password" autocomplete="off" placeholder="请输入5-15位密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="user.checkPassword" autocomplete="off" placeholder="请确认密码"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="name">
                    <el-input type="text" v-model="user.name" placeholder="请输入您的昵称"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="user.gender">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="工作" prop="job">
                    <el-input type="text" v-model="user.job" placeholder="请输入您的工作"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input type="text" v-model="user.address" placeholder="请输入您的地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register('user')">注册</el-button>
                    <el-button @click="resetForm('user')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--发送评论表单-->
        <el-dialog
                title="评论"
                :visible.sync="commentVisible"
                width="30%"
        >
            <el-form label-width="100px" >
                <el-form-item label="内容" prop="content">
                    <el-input v-model="commentContent" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="commentBoilingPoint">发送</el-button>
                    <el-button @click="commentContent=''">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

         <!--查看评论表单-->
         <el-dialog
                title="查看评论"
                :visible.sync="readCommentVisible">
            {{boilingPoint.content}}
            <hr>
            <el-table
                :data="commentData"
                style="width: 100%">
                <el-table-column
                    prop="authorName"
                    label="评论人"
                    width="180">
                    <template slot-scope="scope">
                        <el-link @click="getInfo(scope.row)">{{scope.row.authorName}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="内容">
                </el-table-column>
                <el-table-column
                    prop="likeCount"
                    label="点赞数"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="replyCount"
                    label="回复数"
                    width="180">
                    <template slot-scope="scope">
                        <el-link @click="getReply(scope.row)" v-if="scope.row.replyCount>0">{{scope.row.replyCount}}</el-link>
                        <p v-if="scope.row.replyCount===0">0</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="发布时间"
                    width="180">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-link @click="handleReplyLink(scope.row)">回复</el-link>&emsp;
                        <el-link @click="likeComment(scope.row)" v-if="!scope.row.isLiked" type="primary">点赞</el-link>
                        <el-link @click="cancelLikeComment(scope.row)" v-if="scope.row.isLiked" type="danger">取消点赞</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!--发送回复表单-->
        <el-dialog
                title="回复"
                :visible.sync="replyVisible"
                width="30%"
        >
            <el-form label-width="100px" >
                <el-form-item label="内容" prop="content">
                    <el-input v-model="replyContent" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="replyComment">发送</el-button>
                    <el-button @click="replyContent=''">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--查看回复表单-->
        <el-dialog
                title="查看回复"
                :visible.sync="readReplyVisible">
            <p>
                <el-link @click="getInfo(comment)">{{comment.authorName}}</el-link>:{{comment.content}}
            </p>
            <hr>
            <el-table
                :data="replyData"
                style="width: 100%">
                <el-table-column
                    prop="authorName"
                    label="回复人"
                    width="180">
                    <template slot-scope="scope">
                        <el-link @click="getInfo(scope.row)">{{scope.row.authorName}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="内容">
                </el-table-column>
                <el-table-column
                    prop="likeCount"
                    label="点赞数"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="replyCount"
                    label="回复数"
                    width="180">
                    <template slot-scope="scope">
                        <el-link @click="getReply(scope.row)" v-if="scope.row.replyCount>0">{{scope.row.replyCount}}</el-link>
                        <p v-if="scope.row.replyCount===0">0</p>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="发布时间"
                    width="180">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-link @click="handleReplyLink(scope.row)">回复</el-link>&emsp;
                        <el-link @click="likeReply(scope.row)" v-if="!scope.row.isLiked" type="primary">点赞</el-link>
                        <el-link @click="cancelLikeReply(scope.row)" v-if="scope.row.isLiked" type="danger">取消点赞</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!--发布沸点表单-->
        <el-dialog
                title="发布沸点"
                :visible.sync="addBoilingPointVisible"
                width="30%"
        >
            <el-form label-width="100px" :model="addingBoilingPoint" ref="addingBoilingPoint">
                <el-form-item label="内容" prop="content">
                    <el-input v-model="addingBoilingPoint.content" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addBoilingPoint">发布</el-button>
                    <el-button @click="resetForm('addingBoilingPoint')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    mounted(){
        this.begin=0;
        this.getLoginUser();
        this.getBoilingPoint();
    },
    methods:{
        //获取沸点
        async getBoilingPoint(){
            const isValidJwt = await this.checkJwt();
            let jwt='';
            if(localStorage.getItem('token')===null){
                jwt='';
            }else if(isValidJwt){
                jwt=localStorage.getItem('token');
            }else{
                jwt='';
                localStorage.removeItem('token')
            }
            axios({
                method:"get",
                url:"http://localhost:8080/boilingPoint?begin="+this.begin,
                headers:{token:jwt}
            }).then(resp =>{
                this.tableData=resp.data.data.rows;
                this.totalCount=resp.data.data.totalCount;
            })
        },

        // 登录方法
        login() {
            axios({
                method:"post",
                url:"http://localhost:8080/login",
                data:this.user
            }).then(resp =>{
                // 判断是否存在
                if(resp.data.code){
                    this.resetForm('user');
                    this.loginVisible = false;
                    localStorage.setItem('token',resp.data.data)
                    this.$message.success("登录成功!");
                    this.isLogin=true;
                    this.getLoginUser();
                }else{
                    this.$message.error(resp.data.msg);
                    this.resetForm('user');
                    this.loginVisible = false;
                }
            })
        },

        // 注册用户方法
        register(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            method:"post",
                            url:"http://localhost:8080/register",
                            data:this.user
                        }).then(resp =>{
                            // 判断是否存在
                            if(resp.data.code){
                                this.$message.success("注册成功！");
                                this.registerVisible=false;                                
                                this.resetForm('user');
                            }else{
                                this.$message.error(resp.data.msg);
                                this.resetForm('user');
                                return false;
                            }
                        })
                    } else {
                        this.$message.error('输入不符合要求！请检查后重新输入');
                        this.resetForm('user');
                        return false;
                    }
                });
            },

        // 检查jwt
        async checkJwt(){
            try {  
                const response = await axios({  
                    method: 'get',  
                    url: 'http://localhost:8080/check/' + localStorage.getItem('token')  
                });  
                return response.data.code;
            } catch (error) {  
                return false; 
            }
        },

        // 获取登录中的用户
        async getLoginUser(){
                if(localStorage.getItem('token')!==null){
                const isValidJwt = await this.checkJwt();
                if(isValidJwt){
                    this.isLogin=true;
                    const parts = localStorage.getItem('token').split('.');
                    if(parts.length>2){
                        const payload = parts[1];
                        const decoded = atob(payload);
                        this.loginUserId=JSON.parse(decoded).id;
                        this.loginUser=JSON.parse(decoded).username;
                        this.loginUserRole=JSON.parse(decoded).role;
                    }
                    if(this.loginUserRole===2){
                        this.getIsNotReadCount();
                    }
                    if(this.loginUserRole===0||this.loginUserRole===3){
                        this.getIsNotAuditedCount();
                    }
                }
            }
        },

        // 获取用户信息方法
        getInfo(row){
            this.$router.push({ path: '/user/'+row.authorId});
        },
        

        // 处理登录中用户链接被点击
        handleLoginUserClick(row){
            this.$router.push({ path: '/user/'+row});
        },

        // 处理审核链接被点击
        handleAdminClick(row){
            this.$router.push({ path: '/admin/'+row});
        },

        // 处理通知链接被点击
        handleNoticeClick(row){
            this.$router.push({ path: '/notice/'+row});
        },

        // 退出登录方法
        exit(){
            localStorage.removeItem('token');
            this.isLogin=false;
            this.loginUser='';
            this.loginUserId='';
            this.loginUserRole=''
        },

        //获取用户未读信息数方法
        getIsNotReadCount(){
            axios({
                method:"get",
                url:"http://localhost:8080/notice/"+this.loginUserId,
                headers:{token:localStorage.getItem("token")}
            }).then(resp => {
                if(resp.data.code){
                    this.isNotReadCount=resp.data.data;
                }else{
                    this.$message.error(resp.data.msg)
                }
            })
        },

        //获取管理员未审核数方法
        getIsNotAuditedCount(){
            axios({
                method:"get",
                url:"http://localhost:8080/admin/isNotAudited",
                headers:{token:localStorage.getItem("token")}
            }).then(resp => {
                if(resp.data.code){
                    this.isNotAuditedCount=resp.data.data;
                }else{
                    this.$message.error(resp.data.msg)
                }
            })
        },

         // 获取评论
         async getComments(row){
            const isValidJwt = await this.checkJwt();
            let jwt='';
            if(localStorage.getItem('token')===null){
                jwt='';
            }else if(isValidJwt){
                jwt=localStorage.getItem('token');
            }else{
                jwt='';
                localStorage.removeItem('token')
            }
            this.boilingPoint=row;
            this.readCommentVisible=true;
            axios({
                method:"get",
                url:"http://localhost:8080/comment?beCommentedId="+row.id+"&beCommentedType=2",
                headers:{token:jwt}
            }).then(resp => {
                this.commentData=resp.data.data;
            })
        },

        // 处理评论链接被点击
        async handleCommentLink(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                this.commentVisible=true;
                this.beCommentedId=row.id;
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        // 评论沸点
        commentBoilingPoint(){
            axios({
                method:'post',
                url:'http://localhost:8080/comment',
                data:{beCommentedId:this.beCommentedId,beCommentedType:2,content:this.commentContent},
                headers:{token:localStorage.getItem('token')}
            }).then(resp => {
                if(resp.data.code){
                    this.commentVisible=false;
                    this.getBoilingPoint();
                    this.$message.success('评论成功！');
                }else{
                    this.$message.error(resp.data.msg);
                }
                this.commentContent='';
                this.beCommentedId='';
            })
        },

        // 点赞沸点
        async likeBoilingPoint(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"post",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:2},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getBoilingPoint();
                        this.$message.success("点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },
        
        // 取消点赞沸点
        async cancelLikeBoilingPoint(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:2},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getBoilingPoint();
                        this.$message.success("取消点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        // 处理回复链接被点击
        async handleReplyLink(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                this.replyVisible=true;
                this.beRepliedId=row.id;
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        // 回复评论
        replyComment(){
            axios({
                method:'post',
                url:'http://localhost:8080/comment',
                data:{beCommentedId:this.beRepliedId,beCommentedType:3,content:this.replyContent},
                headers:{token:localStorage.getItem('token')}
            }).then(resp => {
                if(resp.data.code){
                    this.replyVisible=false;
                    this.getBoilingPoint();
                    this.getComments(this.boilingPoint)
                    this.$message.success('回复成功！');
                }else{
                    this.$message.error(resp.data.msg);
                }
                this.replyContent='';
                this.beRepliedId='';
            })
        },

        // 获取回复
        async getReply(row){
            const isValidJwt = await this.checkJwt();
            let jwt='';
            if(localStorage.getItem('token')===null){
                jwt='';
            }else if(isValidJwt){
                jwt=localStorage.getItem('token');
            }else{
                jwt='';
                localStorage.removeItem('token')
            }
            this.comment=row;
            this.readReplyVisible=true;
            axios({
                method:"get",
                url:"http://localhost:8080/comment?beCommentedId="+row.id+"&beCommentedType=3",
                headers:{token:jwt}
            }).then(resp => {
                this.replyData=resp.data.data;
            })
        },

        // 点赞评论
        async likeComment(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"post",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getComments(this.boilingPoint);
                        this.$message.success("点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },
        
        // 取消点赞评论
        async cancelLikeComment(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getComments(this.boilingPoint);
                        this.$message.success("取消点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        // 点赞回复
        async likeReply(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"post",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getReply(this.comment);
                        this.$message.success("点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },
        
        // 取消点赞回复
        async cancelLikeReply(row){
            const isValidJwt = await this.checkJwt();
            if(localStorage.getItem('token')===null){
                this.$message.error('请先登录');
                this.loginVisible=true;
            }else if(isValidJwt){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/like",
                    data:{beLikedId:row.id,beLikedType:3},
                    headers:{token:localStorage.getItem('token')}
                }).then(resp => {
                    if(resp.data.code){
                        this.getReply(this.comment);
                        this.$message.success("取消点赞成功！")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            }else{
                localStorage.removeItem('token');
                this.$message.error('请先登录');
                this.loginVisible=true;
            }
        },

        //发布沸点
        addBoilingPoint(){  
            axios({
                method:"post",
                url:"http://localhost:8080/boilingPoint",
                data:this.addingBoilingPoint,
                headers:{token:localStorage.getItem("token")}
            }).then(resp => {
                if(resp.data.code){
                    this.$message.success("发布沸点申请成功，请等待管理员审核！");
                    this.addBoilingPointVisible=false;
                    this.resetForm('addingBoilingPoint');
                }else{
                    this.$message.error(resp.data.msg);
                }
            })
        },

        //删除沸点
        deleteBoilingPoint(row){
            this.$confirm('确定要删除该沸点吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    method:"delete",
                    url:"http://localhost:8080/boilingPoint/"+row.id,
                    headers:{token:localStorage.getItem("token")}
                }).then(resp => {
                    if(resp.data.code){
                        this.$message.success("删除成功！");
                        this.getBoilingPoint();
                    }else{
                        this.$message.error(resp.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }, 

        //滚动加载条件
        handleScroll () {
            const { clientHeight, scrollHeight, scrollTop } = this.$refs.boilingPointTable;
            const isNearTop = scrollTop <= 1 && this.begin > 0;  
            const isNearBottom = scrollTop + clientHeight + 1 > scrollHeight && this.begin<this.totalCount-5;  
            if (isNearTop) { // 接近顶部时加载  
                this.begin -= 1;
            } else if(isNearBottom){
                this.begin += 1;
            }
            this.getBoilingPoint();
        },

        // 重置方法
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    data() {
      // 检查用户名输入格式
      var checkUsername = (rule, value, callback) => {
                var reg = /^.{5,15}$/;
                if (value === '') {
                    callback(new Error('请输入账号！'));
                } else if(!(reg.test(value))){
                    callback(new Error('长度不符合要求！'));
                } else{
                    callback();
                }
            };
            // 检查第一次密码输入格式
            var validatePass = (rule, value, callback) => {
                var reg = /^.{5,15}$/;
                if (value === '') {
                    callback(new Error('请输入密码！'));
                }else if(!(reg.test(value))){
                    callback(new Error('长度不符合要求！'));
                } else {
                    if (this.user.checkPassword !== '') {
                        this.$refs.user.validateField('checkPassword');
                    }
                    callback();
                }
            };
            // 检查第二次密码是否一致
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码！'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
        return {
            //沸点数据
            tableData: [],
            //评论数据
            commentData:[],
            //回复数据
            replyData:[],
            //登录对话框是否展示的标记
            loginVisible:false,
            //注册对话框是否展示的标记
            registerVisible:false,
            //评论对话框是否展示的标记
            commentVisible:false,
            //阅读评论对话框是否展示的标记
            readCommentVisible:false,
            //阅读回复对话框是否展示标记
            readReplyVisible:false,
            //是否登录标记
            isLogin:false,
            //回复对话框是否展示的标记
            replyVisible:false,
            //发布沸点对话框是否展示标记
            addBoilingPointVisible:false,
            //登录中的用户
            loginUser:'',
            //登录中的用户ID
            loginUserId:'',
            //登录中的用户角色
            loginUserRole:'',
            //被评论的id
            beCommentedId:'',
            //评论内容
            commentContent:'',
            //被回复id
            beRepliedId:'',
            //回复内容
            replyContent:'',
            //未读信息数
            isNotReadCount:'',
            //未审核数
            isNotAuditedCount:'',
            //起始加载索引
            begin:0,
            //沸点总数
            totalCount:'',
            //沸点模型
            boilingPoint:{
                id:'',
                content:'',
                name:'',
                authorId:'',
                createTime:'',
                likeCount:'',
                commentCount:'',
                isLiked:false
            },
            //用户模型
            user: {
                    username:'',
                    password: '',
                    checkPassword:'',
                    name:'',
                    gender:'',
                    image:'',
                    job:'',
                    address:''
                    },
            //评论模型
            comment:{
                id:'',
                content:'',
                authorName:'',
                likeCount:'',
                replyCount:'',
                createTime:'',
                authorId:''
            },
            //发布中的沸点
            addingBoilingPoint:{
                content:'',
            },
            rules: {
                username: [
                    { validator: checkUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPassword: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        }
    },
  };


</script>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
  
    .el-aside {
        color: #333;
    }

    .table-scroll-container {  
        height: 420px; /* 包括表头和可能的其他元素的高度 */  
        overflow-y: auto;  
    } 
</style>